
<script>
    export default {
        props: {
            list: {
                type: Array,
                default: () => ([])
            },
        },

        data () {
            return {
                scale: 0.8,
                clientWidth: 0
            }
        },
		
		mounted() {
			setTimeout(() => {
				this.scale = 1;
				
			}, 400);
		}
    }
</script>

<template>
    <view class="round_view relative transition" :style="{ '--scale': scale }">
        <view 
            :key="index" 
            @tap="$emit('learn', index + 1)"
            v-for="circle, index in list.slice(0, 8)" 
            class="circle_view transition w-full absolute" 
        >
            <image :src="`${$imageBaseUrl}course/circle${index + 1}.svg`" class="w-full h-full" />
            <text class="absolute flex-center circle_view-text">{{ circle || 0 }}</text>
        </view>

        <view class="absolute circle_view-center transition flex_center_center" @tap="$emit('learn', 0)">
            学新
        </view>
    </view>
</template>


<style lang="scss" scoped>
.relative{position: relative}
.absolute{position: absolute}
.transition{transition: all .35s}
.flex-center{display: flex;justify-content: center;align-items: center}
.round_view{width: 516rpx;height: 474rpx;transform: scale(var(--scale)); margin: 0 auto;}
.circle_view-text{width: 54rpx;height: 54rpx;border-radius: 50%;background: #fff;}
.circle_view:first-child{width: 176rpx;height: 156rpx;left: 30rpx;bottom: 2rpx;z-index: 3}
.circle_view:first-child .circle_view-text{top: 34rpx;left: 57rpx;color: #ff5252;}
.circle_view:nth-child(2){width: 149rpx;height: 159rpx;left: 2rpx;bottom: 120rpx;z-index: 2}
.circle_view:nth-child(2) .circle_view-text{top: 34rpx;left: 36rpx;color: #f66c2c;}
.circle_view:nth-child(3){width: 161rpx;height: 149rpx;left: 8rpx;top: 72rpx;z-index: 1}
.circle_view:nth-child(3) .circle_view-text{top: 37rpx;left: 59rpx;color: #ffac47;}
.circle_view:nth-child(4){width: 169rpx;height: 155rpx;left: 96rpx;top: 0}
.circle_view:nth-child(4) .circle_view-text{top: 37rpx;left: 76rpx;color: #ffb255;}
.circle_view:nth-child(5){width: 142rpx;height: 145rpx;right: 132rpx;top: -5rpx;z-index: 2}
.circle_view:nth-child(5) .circle_view-text{top: 47rpx;left: 58rpx;color: #fcbf57;}
.circle_view:nth-child(6){width: 154rpx;height: 168rpx;right: 24rpx;top: 39rpx;z-index: 1}
.circle_view:nth-child(6) .circle_view-text{top: 80rpx;right: 48rpx;color: #ffcf4a;}
.circle_view:nth-child(7){width: 136rpx;height: 165rpx;right: 2rpx;top: 164rpx}
.circle_view:nth-child(7) .circle_view-text{bottom: 40rpx;right: 36rpx;color: #ffe14a;}
.circle_view:nth-child(8){width: 170rpx;height: 158rpx;bottom: 25rpx;right: 16rpx;z-index: 1}
.circle_view:nth-child(8) .circle_view-text{bottom: 41rpx;right: 69rpx;color: #40d463;}
.circle_view:hover{transform: scale(1.08)}
.circle_view-center{width: 213rpx;height: 213rpx;background-color: #F6C72C;border-radius: 100%;left: 50%;top: 50%;transform: translate(-50%, -50%);margin-top: 13rpx;color: #fff;font-size: 36rpx; display: flex; align-items: center; justify-content: center}
.circle_view-center:hover{transform: translate(-50%, -50%) scale(1.08)}
</style>